<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import circles from '@/api/circles.js'
import { FILE_URL } from '@/api/config.js'

// 导航栏的高度
const navbarHeight = ref(0)
// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const state = reactive({
  circlesId: 0,
  circlesMaster: {
    user: {
      avatar: '',
      nickname: '',
    },
  }, // 圈主数据
  administratorData: {
    title: '管理员(0)',
    data: [],
  }, // 管理员数据
  fansData: {
    title: '粉丝(0)',
    data: [],
  }, // 粉丝数据
})

const getCirclesMemberLists = () => {
  circles
    .circlesMemberLists({
      circles_id: state.circlesId,
    })
    .then((res) => {
      if (res.code == 1) {
        state.circlesMaster = res.data.circlesMaster
        state.administratorData = res.data.administratorData
        state.fansData = res.data.fansData
      }
    })
    .catch((err) => {
      console.log(err, 'getCirclesMemberLists')
    })
}

onLoad((options) => {
  if (!options?.circlesId) {
    uni.showModal({
      title: '提示',
      content: '参数错误',
      showCancel: false,
      success: () => {
        uni.navigateBack()
      },
    })
    return
  }
  state.circlesId = options.circlesId
  getCirclesMemberLists()
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      :z-index="999"
      @init-finish="navbarInitFinishHandle"
    >
      圈子成员
    </TnNavbar>
    <!-- 页面内容 -->
    <view class="member" :style="{ paddingTop: `${navbarHeight + 10}px` }">
      <view class="list-container">
        <view
          class="circles-master tn-flex tn-flex-row tn-flex-nowrap items-center"
        >
          <view class="circles-master-image">
            <image
              class="tn-image"
              :src="FILE_URL + state.circlesMaster.user.avatar"
              mode="aspectFill"
            />
          </view>
          <view class="circles-master-name">
            圈主 - {{ state.circlesMaster.user.nickname }}
          </view>
        </view>
      </view>
      <view class="list-container">
        <TnTitle :title="state.administratorData.title" />
        <view
          v-if="state.administratorData.data.length > 0"
          class="member-list"
        >
          <view
            v-for="(item, index) in state.administratorData.data"
            :key="index"
            class="list-item"
          >
            <view class="item-image">
              <image
                class="tn-image"
                :src="FILE_URL + item.user.avatar"
                mode="aspectFill"
              />
            </view>
            <view class="item-title tn-text-ellipsis-1">
              {{ item.user.nickname }}
            </view>
          </view>
        </view>
      </view>
      <view class="list-container">
        <TnTitle :title="state.fansData.title" />
        <view v-if="state.fansData.data.length > 0" class="member-list">
          <view
            v-for="(item, index) in state.fansData.data"
            :key="index"
            class="list-item"
          >
            <view class="item-image">
              <image
                class="tn-image"
                :src="FILE_URL + item.user.avatar"
                mode="aspectFill"
              />
            </view>
            <view class="item-title tn-text-ellipsis-1">
              {{ item.user.nickname }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use './styles/member.scss';
</style>
